<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
<!--    插值表达式，实现内容的部分替换-->
    <p>你好：{{msg}}</p>
<!--    更新dom节点的textontent内容-->
    <p v-text="msg"></p>
<!--    v-text实现字符串的拼接-->
    <p v-text="'你好：'+msg"></p>

<!--    区别！：
                   v-text会覆盖元素中原本的内容
                   但插值表达式只会替换自己的占位符
                   不会把这个元素的内容清空
-->

<!--    v-html： 设置元素的innerHTML值  内容中的html结构会被解析成标签-->
    <p v-html="msg"></p>
</div>

<script>
 var app = new Vue({
     el: "#app",
     data: {
         msg: "vue"
     }
 })
</script>
</body>
</html>
